<template>
  <div class="findPassword">
    <el-form :model="findpasswordForm" :rules="findpasswordRules" ref="findpasswordForm" label-width="auto"
      class="findPassword-form" size="small" status-icon>
      <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="user-Avater">
      <h4>重置密码申请</h4>
      <el-form-item prop="findMobile">
        <el-input type="text" placeholder="请输入您的手机号" v-model="findpasswordForm.findMobile" clearable> </el-input>
      </el-form-item>
      <el-form-item prop="findUserid">
        <el-input type="text" placeholder="请输入您的工号" v-model="findpasswordForm.findUserid"> </el-input>
      </el-form-item>
      <el-form-item>
        <router-link to="/" style="float:left;font-size:small ">返回登录</router-link>
        <el-button class="nextfindPassword" @click="nextfindPassword">下一步</el-button>
      </el-form-item>
    </el-form>
    <!--底部-->
    <div class="el-login-footer">
      <span>ESDN欢迎你的到来</span>
    </div>
  </div>
</template>

<script>
import {postfindpasswordFormData} from "@/api/login/login";
  export default {
    data() {
      // 手机号码输入检验
      var validatefindMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('手机号码不能为空'));
        } else {
          var regMobile = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
          if (!regMobile.test(this.findpasswordForm.findMobile)) {
            callback(new Error('手机号码格式错误'));
          }
          //  if (this.findpasswordForm.findMobile!== '') {
          //    this.$refs.findpasswordForm.validateField('findcheckMobile');
          //  }
          callback();
        }
      };
      //  工号输入检验
      var validatefindUserid = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入工号'));
        } else {
           if (!(/^[0-9]*$/).test(this.findpasswordForm.findUserid)) {
            callback(new Error('请输入正确的工号'));
          }
          callback();
        }
      };
      return {
        findpasswordForm: {
          findMobile: '',
          findUserid: ''
        },

        findpasswordRules: {
          findMobile: [{
            required: true,
            validator: validatefindMobile,
            trigger: 'blur'
          }],
          findUserid: [{
            required: true,
            validator: validatefindUserid,
            trigger: 'blur'
          }],
        }
      };
    },
    methods: {
       
      nextfindPassword() {
        this.$refs.findpasswordForm.validate((valid) => {
          if (!valid) {
            console.log('error submit!!');
            return false;
          } else {
            // 找回密码表单数据处理
            let formData = {
              userId: this.findpasswordForm.findUserid,
              phonenumber: this.findpasswordForm.findMobile
            }
            let data = JSON.stringify(formData);
            console.log(data);
            // 对服务器上传数据
            postfindpasswordFormData(data)
              .then((res) => {
                console.log(res);
                if (res.code === 200) {
                  let str = '密码重置请求已提交，请等待管理员完成审批，您也可以主动联系管理人员'
                  this.$alert(str, '', {
                    confirmButtonText: '返回登录界面',
                    customClass: "checkMessageBox",
                  }).then(() => {
                    this.$router.push('/');
                  })
                } else {
                  this.$message({
                    message: '手机号或工号错误，请重新输入',
                    type: 'warning'
                  });
                }

              }).catch((err) => {
                console.log(err);
              });
          }
        });
        // 提交请求
      }
    }
  }
</script>



<style scoped>
  .findPassword {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    height: 100%;
    background-size: cover;
  }

  img {
    display: block;
    margin: 10px auto;
    border-radius: 50%;
    height: 130px;
    width: 130px;
  }

  a {
    text-decoration: none;
    color: rgb(2, 167, 240);
  }

  .findPassword-form {
    border-radius: 15px;
    border: 1px solid rgb(85, 85, 85);
    width: 400px;
    text-align: center;
    font-size: 15px;
    padding: 20px 25px 22px 25px;
  }

  .el-button {
    display: block;
    width: 120px;
    height: 35px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: rgb(2, 167, 240);
    color: #fefefe;
    border: 2px solid #A9A9A9;
    float: right;
  }

  .el-input {
    width: 70%;
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: black;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
</style>

<style>
  .el-form-item__error {
    margin-left: 60px;
  }
</style>